import React, { useEffect, useState, Component, useRef } from 'react';
import { fetchSync } from '@/utils/request';
import { history, Link } from 'umi';
import { connect, router } from 'dva';

import enUS from 'antd/es/locale/en_US';
import {
    Menu, Switch, Divider, Checkbox, Button, Row, Col, Tooltip, notification, Skeleton, Avatar, DatePicker, Descriptions, FloatButton, Badge,Empty,
    Form, Modal, Select, Tree, Icon, Radio, Table, Tag, Pagination, Input, Space, message, Card, Tabs, Collapse, Image, ConfigProvider
} from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined, AudioOutlined, UserOutlined, ArrowRightOutlined, ArrowLeftOutlined } from '@ant-design/icons';

import 'mapbox-gl/dist/mapbox-gl.css';
import styles from './itemActivity.less';
import moment from 'moment';

export default (props) => {
    const [selectCost, setSelectCost] = useState(null);
    const [feature, setFeature] = useState({});
    const showmapContainer = useRef(null);
    const echarts8 = useRef(null);
    const commentList = useRef(null);

    const [isJoin, setIsJoin] = useState(false)

    const [selectQiangxianItem, setSelectQiangxianItem] = useState({ people: 0 })

    //初始函数
    useEffect(async () => {
        //此处编写 组件挂载之后和组件重新渲染之后执行的代码
        // qu_data = await fetchSync('/api/fangxun/qu/findAll')
        console.log(props);

        return () => {
            //此处编写 组件即将被卸载前执行的代码
        }
        // 4、若传值，但是传的是空数组 []，则表示该useEffect里的内容仅会在“挂载完成后和组件即将被卸载前”执行一次；
    }, [])

    const goToDetails = (item) => {
        console.log(item)
        history.push({
            pathname: '/runjoy/activityDetail',
            search:'?id='+ item.id
        })
    }

    return (
        <div className={styles.activitiesPanel}>
            {
                props.data.map((item, idx) => {
                    return <div className={`${styles.item} ${selectCost?.name === item.name ? styles.active : ''}`} key={idx} onClick={() => goToDetails(item)}>
                        <Badge.Ribbon text={item.activityType} color={ item.activityType === 'Cycling' ? "pink" : item.activityType === 'Running' ? "green" : "purple"}>
                            <img src={item.base64Images.length ? item.base64Images[0] : require('./img/activities/6.jpg')} width={150} height={100}></img>
                        </Badge.Ribbon>
                        <div className={styles.info}>
                            <label>{item.name}</label>
                            <span >{moment(item.activityTime).format('YYYY-MM-DD hh:mm')}</span>
                            <a>{item.userName}</a>
                        </div>
                    </div>
                })
            }
            {/* {
                props.data.length === 0 && <ConfigProvider locale={enUS}> <Empty /> </ConfigProvider> 
            } */}
        </div>
    );
}
